/* Full-screen background video */
body, html, {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
  }


@font-face {
           font-family: 'Roboto';
           src: url('fonts/Roboto-Light.ttf') format('truetype'),
           font-weight: normal;
          font-style: normal;
       }

@font-face {
            font-family: 'Gothic';
                src: url('fonts/Gothic.ttf') format('truetype'),
                 font-weight: normal;
                 font-style: normal;
              }

#background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire screen */
    z-index: -1; /* Put the video behind the content */
}

/* Content styling */
.content {
    position: relative;
    z-index: 1;
    color: green;
    text-align: center;
    padding: 20px;
    font-family: Roboto, Arial, sans-serif;
}

h1 {
    font-size: 4rem;
}

p {
    font-size: 1.5rem;
}

/* Logo Container */

header {
background-color: #f8f8f8; /* Light background color */
/*padding: 5px;
/*text-align: center; /* Center the logo */
display: flex;
justify-content: right;
align-items: center;
width: 100%; /* Ensure it stretches across the entire width*/
position:fixed;  /* Optional: Keep the header fixed at the top*/
top: 0;
left: 0;
right: 0;
z-index: 999;
}

/*
.ui-layout-north {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #f6f6f6;
    z-index: 1;
    height: 100px;
}


.ui-layout-north .logo {
    line-height: 100px;
}
*/


.logo-carisun {
  position: absolute;        /* Fix the position to the top of the page */
  top: 0;                 /* Align to the top of the page */
  left: 0;                /* Align to the left of the page */
  right: 0;               /* Make it span the full width */
  z-index: 1;          /* Ensure it appears in front of other content */
  padding: 20px;          /* Add some padding around the links */
  text-align: center;     /* Center-align the links horizontally */
  width: 100%;
align-items: center;
}

.logo-container {
display: flex; /* Keeps logo centered */
/*position: fixed;*/
z-index: 799;
/*padding:10px;*/
top: 0;
left: 0;
width: 100%;
align-items: center;
}

.logo {
/*position: fixed;*/
z-index: 999;
padding-left: 10px;
max-width: 100px; /* Limit the width of the logo */
height: auto; /* Maintain aspect ratio */
}


.menu-icon {
/*  position: fixed;*/
z-index: 9999;
display: flex; /* Hide by default, shown only on mobile */
cursor: pointer;
padding-right: 30px;
width: 30px;
height: 21px;
position: absolute;
flex-direction: column;
justify-content: space-between;
}

.menu-icon .line{
background-color: #333;*
position: absolute;
margin-left: auto;
top:0;
right:0;
height: 4px;
width: 100%;
}

/* Navigation Menu Styling */
.menu {
display:none; /* Hide the menu by default */
position: absolute;
top: 120px; /* Adjust this value to position the menu below the header */
right: 20px;
background-color: #AFABAB;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 10px;
width: 170px;
border-radius: 8px;
}


.floating-links {
  position: fixed;        /* Fix the position to the top of the page */
  top: 0;                 /* Align to the top of the page */
  left: 0;                /* Align to the left of the page */
  right: 0;               /* Make it span the full width */
  z-index: 9999;          /* Ensure it appears in front of other content */
  background-color: #f8f8f8;  /* Optional: make background slightly transparent */
  padding: 10px;          /* Add some padding around the links */
  text-align: center;     /* Center-align the links horizontally */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  /* Optional: adds a shadow for better visibility */
}

.floating-links a {
  text-decoration: none;  /* Remove underline */
  color: #f8f8f8;            /* Set the text color */
  padding: 0 15px;        /* Add some spacing between the links */
  font-size: 18px;        /* Adjust the font size */
}

.floating-links a:hover {
  color: #007bff;         /* Change color when hovering over the links */
}


/* Menu Items Styling */
.menu ul {
list-style-type: none;
padding: 0;
}

.menu ul li {
margin: 15px 0;
}

.menu ul li a {
text-decoration: none;
color: white;
font-size: 15px;
font-family:sans-serif;
padding: 5px 10px;
display: block;
}

/* Show the menu when "show" class is added */
.menu.show {
display: block;
}


/* Responsive design: Show menu icon on mobile */
@media (max-width: 768px) {
.menu-icon {
 display: flex; /* Show the hamburger menu icon on smaller screens */
}


/* Main content styling */
main {
padding: 20px;
}

h1 {
color: #333;
}

p {
color: #666;
}


#iframe-container {
width: auto;          /* Adjust the width as needed */
height: 400px;       /* Adjust the height as needed */
margin: 0 auto;      /* Centers the iframe container */
background-color: white; /* White background */
border-radius: 15px; /* Curved edges */
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow */
overflow: hidden;    /* Ensure the content doesn't overflow */
display:none;
font-family: Roboto;
}

       /* Style for the iframe itself */
iframe {
width: 100%;         /* Full width of the container */
height: 100%;        /* Full height of the container */
border: none;        /* Remove the default border */
color: black;        /* Text color inside iframe */
font-family: Roboto;
}

       /* Optional: Style for the content inside the iframe */
       /* If you control the content inside the iframe, you can style it directly */
iframe.content {
background-color: white;
color: black;
font-family: Roboto, Arial, sans-serif;
padding: 20px;
}